<!DOCTYPE html>
<html>
<head>
    <title>{:get_system_config('system_name','system')}</title>
    {include file='public/public_head' /}
    <link rel="stylesheet" href="__ADMIN__/css/login.min.css"/>
</head>
<body>
    <canvas id="canvas-wrap"></canvas>
    <div class="login_wrap">
        <div class="login-box">
            <form method="post" id="form_login" class="layui-form">
                <div class="login-box-header">{:get_system_config('system_name','system')}</div>
                <div class="login-box-body">
                    <div>
                        <input type="text" placeholder="登录名" class="layui-input" name="account" id="account" placeholder="登录名" check="required" info="请输入登录名"/>
                    </div>
                    <div>
                        <input type="password" id="password" class="layui-input" placeholder="密码" name="password" check="required" info="密码"/>
                    </div>
                </div>
                <div class="login-box-footer">
                    <div class="layui-btn w100" onclick="login()">立即登录</div>
                </div>
            </form>
        </div>
        <div class="copyright"></div>
    </div>
    {include file='public/public_script' /}
</body>
</html>
<script>
    document.onkeydown = function (event) {
        var e = event || window.event;
        if (e && e.keyCode == 13) {
            login();
        }
    };

    layui.use(['element'], function() {
        var $ = layui.$
        set_return_url(null);
        var fn = {
            login: function() {
                send_form("form_login", "{:url('check_login')}", function(ret) {
                    if (ret.code) {
                        layer.msg(ret.msg, {
                            time: 1000
                        }, function() {
                            location.href = "{:url('index/index')}";
                        });
                    } else {
                        layer.msg(ret.msg);
                        return false;
                    }
                });
            },
        };
        win_exp(fn);
    });

    // 底部canvas
    (function() {
        var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
        // Main
        initHeader();
        addListeners();
        function initHeader() {
            width = window.innerWidth;
            height = window.innerHeight;
            target = {x: 0, y: height};
            canvas = document.getElementById('canvas-wrap');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext('2d');
            // create particles
            circles = [];
            for(var x = 0; x < width*0.5; x++) {
                var c = new Circle();
                circles.push(c);
            }
            animate();
        }
        // Event handling
        function addListeners() {
            window.addEventListener('scroll', scrollCheck);
            window.addEventListener('resize', resize);
        }
        function scrollCheck() {
            if(document.body.scrollTop > height) animateHeader = false;
            else animateHeader = true;
        }
        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
        }
        function animate() {
            if(animateHeader) {
                ctx.clearRect(0,0,width,height);
                for(var i in circles) {
                    circles[i].draw();
                }
            }
            requestAnimationFrame(animate);
        }
        // Canvas manipulation
        function Circle() {
            var _this = this;
            // constructor
            (function() {
                _this.pos = {};
                init();
            })();
            function init() {
                _this.pos.x = Math.random()*width;
                _this.pos.y = height+Math.random()*100;
                _this.alpha = 0.1+Math.random()*0.3;
                _this.scale = 0.1+Math.random()*0.3;
                _this.velocity = Math.random();
            }
            this.draw = function() {
                if(_this.alpha <= 0) {
                    init();
                }
                _this.pos.y -= _this.velocity;
                _this.alpha -= 0.0005;
                ctx.beginPath();
                ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
                ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
                ctx.fill();
            };
        }
    })();
</script>